<template>
  <div class="issues-main">
    <!-- 头部 -->
    <IssuesHeader @send-input-change="handleInputChange"></IssuesHeader>
    <!-- 问题内容 -->
    <body class="issues-content">
      <div class="content-table">
        <!-- nav栏 -->
        <IssuesMenu @send-item-click="handleItemClick"></IssuesMenu>
        <!-- 表格 -->
        <IssuesTable :issuesTableData="issuesTableData" :loading="loading"></IssuesTable>
      </div>
      <!-- 页脚 -->
      <div class="content-footer">
        <el-pagination
          v-model:currentPage="pager.page"
          v-model:page-size="pager.size"
          :page-sizes="[10]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pager.total"
          @size-change="onSize"
          @current-change="onPage"
        />
      </div>
    </body>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
// import { Issues, Isearch } from '@/views/issues/config/issues'

// import { getIssuesList } from '@/apis/issues/issues-lists'

import IssuesMenu from './components/IssuesMenu.vue'
import IssuesTable from './components/IssuesTable.vue'
import IssuesHeader from './components/IssuesHeader.vue'
import { getProblemsList } from '@/apis/system/problems'
import { Itype } from '@/type'
import { IProblems } from './config/problems'
import { getUserInfo } from '@/utils/tools'

/**
 * 获取问题表格数据
 */
let pager = ref({
  page: 1,
  size: 10,
  total: 0
})
let params = reactive({
  title: '',
  pageNum: 1,
  pageSize: 10
})
const issuesTableData = ref<IProblems>()
const loading = ref(false)
const getData = (data?: object) => {
  loading.value = true
  getProblemsList(data ? data : params)
    .then((res) => {
      if (!res.rows) return
      res.rows.forEach((element: IProblems) => {
        element.created_at = new Date(
          +new Date(new Date(element.created_at).toJSON()) + 8 * 3600 * 1000
        )
          .toISOString()
          .replace(/T/g, ' ')
          .replace(/\.[\d]{3}Z/, '')
      })
      issuesTableData.value = res.rows
      loading.value = false
    })
    .catch(() => {
      ElMessage('服务器内部错误)))')
    })
    .finally(() => {
      loading.value = false
    })
}

getData()

/**
 * @desc: 分页数量
 * @param {Number} size
 */
const onSize = (size: number) => {
  pager.value.size = size
  getData()
}

/**
 * @desc: 切换页码
 * @param {Number} page
 */
const onPage = (page: number) => {
  pager.value.page = page
  getData()
}

/**
 * @desc: 标题搜索
 * @param {Array} search 搜索
 */
let timer = 0
const handleInputChange = (res: string) => {
  let params = reactive({
    title: res,
    pageNum: 1,
    pageSize: 10
  })
  if (timer) {
    clearTimeout(timer)
  }
  timer = setTimeout(() => {
    getData(params)
  }, 1000)
}

/**
 * @desc: menu筛选
 * @return
 */
const handleItemClick = (res: any, num: number) => {
  if (res.is_status === '全部') {
    getData()
  } else {
    getData(res)
  }
}
</script>

<style lang="less" scoped>
:deep(.el-input--small .el-input__wrapper) {
  background: rgba(247, 247, 247, 1);
  color: rgba(247, 247, 247, 1);
}
:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #6c52ea inset;
  background: #fff;
}
:deep(.el-pager li) {
  color: var(--el-pagination-hover-color);
  cursor: default;
  width: 10px;
  margin: 0 4px;
  box-sizing: border-box;
  background: rgba(247, 247, 247, 1);
  color: #6c52ea;
}
:deep(.el-pager li.is-active) {
  color: var(--el-pagination-hover-color);
  cursor: default;
  width: 10px;
  margin: 0 4px;
  box-sizing: border-box;
  color: #fff;
  background: #6c52ea;
  opacity: 0.6;
}
:deep(.el-pagination__sizes + button.btn-prev[type='button']) {
  color: var(--el-pagination-hover-color);
  cursor: default;
  width: 10px;
  margin: 0 4px;
  box-sizing: border-box;
  background: rgba(247, 247, 247, 1);
  color: #6c52ea;
}
:deep(.el-pagination__sizes + button.btn-prev[type='button'].is-active) {
  color: var(--el-pagination-hover-color);
  cursor: default;
  width: 10px;
  margin: 0 4px;
  box-sizing: border-box;
  background: rgba(247, 247, 247, 1);
  color: #6c52ea;
}
:deep(.el-pager + button.btn-next[type='button']) {
  color: var(--el-pagination-hover-color);
  cursor: default;
  width: 10px;
  margin: 0 4px;
  box-sizing: border-box;
  background: rgba(247, 247, 247, 1);
  color: #6c52ea;
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  border-color: #6c52ea;
  background-color: #6c52ea;
}
:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
  border-color: #6c52ea;
  background-color: #6c52ea;
}
:deep(.el-checkbox__inner:hover) {
  border-color: #6c52ea;
}
.issues-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  box-sizing: border-box;

  .issues-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    width: 100%;
    margin-top: 8px;
    padding: 0 10px;
    border-radius: 8px;
    background: #ffffff;
    .content-table {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      overflow: hidden;
      padding-top: 10px;
    }
    .content-footer {
      padding-bottom: 10px;
    }
  }
}
</style>
